body,h1,h2,h3,h4,h5,h6,p,ul,figure{
	margin:0;
	padding:0;
}
a{
	text-decoration:none;
}
ul{
	list-style:none;
}
body{
	background-size:100%;
	font-size: 12px;
    font-family: 'Microsoft Yahei';
    color: #272a30;
    background: rgba(51, 51, 51, 0.04);
}
.w(@w:1100px){
	width:@w;
}
.fl(@fl:left){
	float:@fl;
}
.fr(@fr:right){
	float:@fr;
}
.bf(@bf:#fff){
	background:@bf;
}
.center(){
	margin:0 auto;
}
.text(@txt:center){
	text-align:@txt;
}
.container{
	.w;
	.center;
}
.clearfix{
	&:after{
		display:block;
		content:'';
		clear:both;
	}
}
/* 公用 */
.items{
	height:150px;
	padding:20px 0;
	.clearfix;
	.item-fl{
		.fl;
		width:200px;
		height:130px;
		overflow:hidden;
		padding:5px;
		img{
			width:230px;
			height:140px;
			transform: scale(1);
   			transition: .5s linear;			
   			&:hover{
				transform: scale(1.2);
   				transition:transform .5s linear;
			}
		}
	}
	.item-fr{
		.fl;
	    line-height: 22px;
	    color: #756F71;
		width:500px;
		padding-left:20px;
		&>h3{
			font-size: 16px;
		    font-weight: bold;
		    margin-bottom: 10px;
		    margin-top:3px;
		    a{
		    	color:#474645;
		    }
		}
		.info{
			word-wrap: break-word;
		}		
		.autor{
			padding:10px 0;
			&>a{
				padding:5px;
				 color: #756F71;
				 i{
				 	padding-right:3px;
				 }
			}
			.reads{
				margin-left:30px;
				width:80px;
				border-radius:20px;
				padding:1px;
				text-align:center;
				background:rgba(208,208,208,0.8);
				color:#333;
				text-shadow:2px 2px 2px #fff;
				&:hover{
					background:rgba(67,147,223,0.8);
					color:#fff;
					text-shadow:2px 2px 2px #333;
				}
			}
			.bk{
				i{
					color:rgba(248,168,168,1);
				}
				color: #759b08;
				&:hover{
					text-decoration: underline;
				} 
			}
			.date{
				i{
					color:rgba(110,202,203,1);
				}
			}
			.bk,.date{
				display:block;
				.fl;
			}
			.ll,.pl{
				display:block;
				.fr;
			}
		}
	}
	
}
.pageBox{
	text-align:center;
	margin:10px 0;
	&>a,&>span{
		display:inline-block;
		border:1px solid rgba(195,205,201,1);
		padding:8px 15px;
		background:rgba(241,246,245,1);
		color:#333;
		border-radius:3px;
		&:hover{
			color:#eb0064;
		}
		margin:0 3px;
	}
	.active{
		background:rgba(79,97,109,1);
		color:#fff;
		&:hover{
			color:#fff;
		}
	}
	
}
article{
	.title{
		font-size:22px;
		padding:20px 0;
		font-weight:500;
		text-align:center;
	}
	.info{
		border: #ccc 1px dashed;
	    text-align: center;
	    padding: 5px 0;
	    color: #999;
	    &>small{
	    	padding-left:10px;
	    	letter-spacing:1px;
	    }
	    &>a{
	    	color: #999;
	    	&:hover{
	    		text-decoration: underline;
    			color: #F60;
	    	}
	    }
	}
	.content{
		overflow: hidden;
	    margin: 20px 30px 20px 0;
	    line-height: 28px;
	    font-size: 14px;
	    text-indent: 2em;
	    color: #666;
	    img{
	    	display:block;
	    	margin:0 auto;
	    }
	}
	.author{
		font-size:14px; 
		margin-bottom:20px;
	}

}
/* .search-inp */
.search-inp{
	position:fixed;
	top:-200px;
	transition:top 0.5s;
	left:0;
	width:100%;
	height:200px;
	background:rgba(0, 0, 0, .5);
	z-index:9999;
	input{
		outline:medium;
		border:0;
		background:rgba(255, 255, 255, .92);;
		color:#333;
		border: 1px solid #ccc;
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		&:focus{
			border:0;
			border:1px solid rgba(102,175,233,1);
			box-shadow: inset 0 2px 2px rgba(102,175,233,.075);
		}
	}
	.fa-times-circle{
		position:absolute;
		right:20px;
		top:20px;
		color:#fff;
		cursor:pointer;
	}
	.sea-center{
		width:720px;
		margin:80px auto;
		position:relative;
		&>i{
			position:absolute;
			left:10px;
			top:8px;
			color:#ccc;
		}
		.sea-input{
			display:block;
			width:550px;
			padding:10px 10px 10px 40px;
			border-radius:40px;
			margin-right:20px;
			.fl;
		}
		.submit{
			display:block;
			width:80px;
			padding:10px;
			border-radius:40px;
			.fl;
			cursor:pointer;
		}
	}
}
.search-inpOnclick{
	top:0;
	transition:all 0.5s;
}
